<template>
  <div id="myPassword" class="card">
    <div class="card-header">密码修改</div>
    <div class="card-body" id="divPassword">
      <form id="frmUpdatePassword" class="form-horizontal">
        <div class="row">
          <label class="control-label col-2 ms-auto text-end">当前用户</label>
          <div class="col-4 me-auto">
            {{ username }}
          </div>
        </div>
        <div class="row">
          <label class="control-label col-2 ms-auto text-end">当前密码</label>
          <div class="col-4 me-auto">
            <input
              type="password"
              name="currentPassword"
              class="form-control"
              v-model.trim="curPassword"
            />
          </div>
        </div>
        <div class="row">
          <label class="control-label col-2 ms-auto text-end">新密码</label>
          <div class="col-4 me-auto">
            <input
              type="password"
              name="newPassword"
              class="form-control"
              v-model.trim="newPassword"
            />
          </div>
        </div>
        <div class="row">
          <label class="control-label col-2 ms-auto text-end">确认密码</label>
          <div class="col-4 me-auto">
            <input
              type="password"
              name="confirmPassword"
              class="form-control"
              v-model.trim="confirmPassword"
            />
          </div>
        </div>
        <div class="row">
          <button
            id="btnChange"
            type="button"
            class="btn btn-primary  col-4 offset-4"
            :disabled="changing"
            @click.stop="updatePassword()"
          >
            保存修改
          </button>
        </div>
      </form>
    </div>
  </div>
</template>

<script>
import { APP_FLIGHT_PATH } from "@/common/common.js";
import { updatePassword } from "@/api/user.js";

export default {
  data() {
    return {
      curPassword: "",
      newPassword: "",
      confirmPassword: "",
      changing: false,
    };
  },
  computed: {
    username() {
      return this.$store.state.username;
    },
  },
  methods: {
    showErrMsg: function (msg, msgType) {
      this.$store.dispatch("showAlertMsg", {
        errMsg: msg,
        errMsgType: msgType,
      });
    },
    updatePassword: function () {
      if (this.curPassword.length < 3) {
        this.showErrMsg("请输入当前密码, 密码不能少于3位字符");
        return;
      }

      if (this.newPassword.length < 3) {
        this.showErrMsg("请输入新密码, 密码不能少于3位字符");
        return;
      }

      if (this.newPassword !== this.confirmPassword) {
        this.showErrMsg("新密码和确认密码不一致");
        return;
      }

      this.changing = true;

      const params = {
        currentPassword: this.curPassword,
        newPassword: this.newPassword,
        confirmPassword: this.confirmPassword,
      };

      updatePassword(
        params,
        (v) => {
          if (v.status === "OK") {
            this.showErrMsg("修改成功", "success");
            this.reset();
          } else {
            this.showErrMsg(v.errmsg, "danger");
            this.newPassword = "";
            this.confirmPassword = "";
          }
        },
        () => {
          this.changing = false;
        }
      );
    },
    reset: function () {
      this.curPassword = "";
      this.newPassword = "";
      this.confirmPassword = "";
    },
  },
};
</script>